<template>
	<view>
		<view class="box">
			<view class="top">
				<view class="top_text">
					<text>感谢您对超级货运的支持！您的宝贵意见将成为我们日后工作的重要参考。</text>
					<text>如遇问题需协助处理，请联系028-85226878，以便我们及时跟进。</text>
				</view>
			</view>
			<view class="main">
				<view class="main_body">
					<text style="display: block;">我的意见是关于</text>
					 <view>
					        <view class="uni-list">
					            <radio-group @change="radioChange" style="display: flex;justify-content: space-between;margin-top: 8px;">
					                <label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					                    
					                        <radio :value="item.value" :checked="index === current" />
					                    
					                    {{item.name}}
					                </label>
					            </radio-group>
					        </view>
					    </view>
						<text style="display: block;margin-top: 40rpx;">我的意见/建议是</text>
						<view style="background: #F4F3F3;border-radius: 4px;">
							<textarea style="padding: 12px;margin-top: 4px;" v-model="memo"  placeholder="任何意见与建议,请在这里告诉我们吧"></textarea>
						</view>
						
				</view>
			</view>
			<view class="bottom">
				<text style="display: block;margin-left: 12px;padding-top: 6px;">截图</text>
				<view style="display: flex;">
					<view style="display: flex;flex-wrap: wrap;margin-left: 12px;">
						<view v-for="(item, index) in singForImags" :key="index" style="padding-right: 10px;position: relative;">
							<image class="img" :src="item"></image>
							<image @click="delImg(index)" class="conle" src="https://shengxp.oss-cn-chengdu.aliyuncs.com/camelx/90c8b182433a46f9807490538301f268.png"></image>
						</view>
						<view class="img_all" @click="photograph" v-show="add">
							<view style="width: 64px;height: 64px;background: #E9E9E9;margin-top: 5px;position: relative;">
								<image class="more" src="https://shengxp.oss-cn-chengdu.aliyuncs.com/camelx/9d96cb5c06564a1abb5031b48c32bd12.png"></image>
							</view>
						</view>
					</view>
				
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="submit_value" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import tool from '@/config/tools.js';
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				items: [{
				                    value: '0',
				                    name: '产品功能',
									checked: 'true'
				                },
				                {
				                    value: '1',
				                    name: '平台规则及策划',
				                },
				                {
				                    value: '2',
				                    name: '其他'
				                }
				            ],
				            current: 0,
							allImg: [],
							singForImags: [],
							add: true,
							signObj: {},
							memo: '',
							feedbackType:"0",
				        }
			
		},
		mixins: [tool],
		methods: {
			radioChange: function(evt) {
			            for (let i = 0; i < this.items.length; i++) {
			                if (this.items[i].value === evt.detail.value) {
			                    this.current = i;
								this.feedbackType = this.items[i].value
			                    break;
			                }
			            }
			        },
					//提交
					async submit(){
						if(this.singForImags.length == 0){
							uni.showToast({
								    title: '请上传图片！！！',
									icon:"none",
								    duration: 2000
								});
						}
						else{
							let res = await this.$request.get(this.$requestUrl.SAVEFEEDBACK_URL, {
								data: {
									feedbackType:this.feedbackType,
									feedback:this.memo,
									backImg:''
								},
							});
							if(res){
								uni.reLaunch({
									url:"../index/index"
								})
							}
						}
					},
					delImg(index) {
						let _singForImags = this.singForImags
						_singForImags.splice(index, 1)
						this.singForImags = _singForImags
						if(this.singForImags.length < 12){
							this.add = true
						}
					},
					async uploadImages(filePaths) {
						for (let index = 0; index < filePaths.length; index++) {
							let url = await this.uploadImg(filePaths[index]);
							this.singForImags.push(url)
							if (this.singForImags.length >= 12) {
								this.add = false
							}
							console.log(url)
						}
						uni.hideLoading();
					},
					photograph() {
						const _this = this
						uni.chooseImage({
							count: 12 - this.singForImags.length, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['camera', 'album'], //从相册选择
							success: function(res) {
								uni.showLoading({
								    title: '加载中'
								});
								console.log('图片',res)
								_this.allImg = _this.allImg.concat(res.tempFilePaths);
								_this.uploadImages(res.tempFilePaths)
								console.log('图片',res)
								if (_this.allImg.length >= 12) {
									_this.add = false
								}
							}
						});
					},
		}
	}
</script>

<style>
	.top{
		
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 24rpx;
		margin-top: 24rpx;
	}
	.top_text{
		padding: 24rpx;
	}
	.top_text text{
		display: flex;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2C2C2D;
		line-height: 40rpx;
	}
	.conle{
		width: 40rpx;
		height: 40rpx;
		z-index: 20;
		position: absolute;
		bottom: 100rpx;
		right: 100rpx;
	}
	.main{
		
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 0 24rpx;
		margin-top: 16rpx;
	}
	.main_body{
		
		padding: 24rpx;
	}
	.bottom{
		
		margin: 0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 24rpx;
		margin-top: 16rpx;
	}
	.footer{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		
		padding-bottom: 12px;
		
	}
	.submit_value{
		width: 100%;
		margin: 0 24rpx;
		height: 80rpx;
		background: #FF690D;
		border-radius: 40rpx;
		color: #FFFFFF;
	}
	.img {
		width: 128upx;
		height: 128upx;
		margin-top: 10upx;
		
		background: #E9E9E9;
	}
	
	.more {
		width: 40upx !important;
		height: 40upx;
		position: absolute;
		left: 50%;
		top: 50%;
		/* transform: translateX(-50%);
		transform: translateY(-50%); */
		transform: translate(-50% ,-50%);
	}
	
	

</style>
